<template>
  <div class="result-body">
    <div class="mocks-detail-bar">
      <ul class="bar-list">
        <li class="list-item" v-for="(question, index) in partInfo.question_list"
            @click.prevent="showQuestion(index)"
            :class="activeIndex == index ? 'active' : ''">
          <span class="item-num">Q {{(index < 10 ? '0' + (index + 1) : (index + 1))}}</span>
          <!--<span class="item-flag" :class="(question.isCorrect ? 'correct' : 'error')"></span>-->
        </li>
      </ul>
    </div>
    <div class="mocks-detail-container">
      <div class="d-speak">
        <audio v-if="audioUrl" ref="audio" :src="audioUrl" @canplay="handleAudioCanplay" preload="auto"></audio>
        <div class="speak-item" v-for="(question, index) in partInfo.question_list"
                  @click="handleUserAnswerClick"
                  :class="activeIndex == index ? 'active' : ''">
          <div class="d-title" v-html="textFormat(question.question)"></div>
          <div class="d-answer">
            <p class="answer-title">您的答案：</p>
            <div class="wx-audio">
              <div class="wx-audio-bar" :class="{'active': isPlaying}">
                <span class="wx-icon"></span>
                <span class="wx-timer" v-html="formartTime(question.record_time)"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "MocksSpeakDetail",
    props: {
      partInfo: Object
    },
    data() {
      return {
        activeIndex: 0,
        audioUrl: '',
        isPlaying: false,
        canplay: false
      }
    },
    created () {
      this._setAudioUrl();
    },
    destroyed () {
      if (this.isPlaying) {
        this.isPlaying = false;
        let $audio = this.$refs['audio'];
        if ($audio) {
          $audio.pause();
          $audio.currentTime = 0;
        }
      }
    },
    methods: {
      _setAudioUrl () {
        let question = this.partInfo.question_list[this.activeIndex];
        this.audioUrl = question.user_answer;

        this.$nextTick(() => {
          this.isPlaying = false;
          let $audio = this.$refs['audio'];
          if ($audio) {
            $audio.pause();
            $audio.currentTime = 0;
          }
        });
      },
      showQuestion (index) {
        this.activeIndex = index;
        this._setAudioUrl();
      },
      textFormat (text) {
        text = (text && typeof text === 'string') ? text.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;') : '';
        return text;
      },
      formartTime (time) {
        let min = Math.floor(time / 60);
        let sec = Math.floor(time % 60);
        let minStr = min > 9 ? '' + min : '0' + min;
        let secStr = sec > 9 ? '' + sec : '0' + sec;
        return `<i>${minStr}</i><i>${secStr}</i>`;
      },
      handleUserAnswerClick () {
        let $audio = this.$refs['audio'];
        if ($audio && this.canplay) {
          if (!this.isPlaying) {
            $audio.play();
            this.isPlaying = true;
          } else {
            $audio.pause();
            $audio.currentTime = 0;
            this.isPlaying = false;
          }
        }else{
          layer.msg('音频加载失败')
        }
      },
      handleAudioCanplay () {
        let $audio = this.$refs['audio'];
        if ($audio) {
          this.canplay = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
